<template>
    <div class="home-panel">
        <HomePanl title="母婴">
            <template #sub>
                <ul class="loo">
                    <li v-for="item in ls.children" :key="item.id">
                        <RouterLink to="/">
                            {{ item.name }}
                        </RouterLink>
                    </li>
                    <RouterLink class="x-m" to="/"><span>查看全部 &gt;</span></RouterLink>
                </ul>
            </template>
            <template #ck>
                <RouterLink to="/" class="box">
                    <img class="aaa" :src=ls.picture alt="">
                    <strong class="label">
                        <span>{{ ls.name }}</span>
                        <span>{{ ls.saleInfo }}</span>
                    </strong>
                </RouterLink>
            </template>
            <template #lo>
                <ul class="lists">
                    <li v-for="item in ls.goods" :key="item.id">
                        <div class="goods-item">
                            <RouterLink to="/"><img :src="item.picture" alt=""></RouterLink>
                            <p class="name ellipsis-2">{{ item.name }}</p>
                            <p class="desc ellipsis">{{ item.desc }}</p>
                            <p class="price">￥{{ item.price }}</p>
                            <div class="extra">
                                <RouterLink to="/">
                                    <span>找相似</span>
                                    <span>发现现多宝贝 ></span>
                                </RouterLink>
                            </div>
                        </div>
                    </li>
                </ul>
            </template>
        </HomePanl>
    </div>
</template>

<script>
import HomePanl from '../Homes/goods.vue'
import { getGoods } from '@/request/api/myc/myc'
    export default {
        components:{
        HomePanl
    },
        data(){
            return{
                ls:[]
            }
        },
        mounted() {
            this.Category();

        },
        methods: {
            async Category() {
                const res = await getGoods();
                console.log("母婴", res.data.result);
                this.ls = res.data.result[3]
            }
        }
    }
</script>

<style lang="scss" scoped>
.carousel-list {
    display: flex;

    .carousel-list-item {
        width: 20%;
        padding: 5px;
    }
}

.an-niu {
    display: flex;
    justify-content: flex-end;
}

.home-panel {
    position: relative;
    height: 700px;
}

.loo {
    line-height: 30px;

    li {
        float: left;
        padding: 2px 12px;
        font-size: 16px;
        border-radius: 4px;

        a {
            color: #333;
        }
    }

    li:hover {
        background: #27ba9b;

        // color: #fff;
        a {
            color: #fff;
        }
    }

    .x-m {
        margin-left: 80px;

        span {
            font-size: 16px;
            vertical-align: middle;
            margin-right: 4px;
            color: #999;
        }
    }

    .x-m:hover span {
        color: #27ba9b;
    }
}

.box {

    .aaa {
        width: 240px;
        height: 610px;
        max-height: 610px;
        position: absolute;
        left: 0;
        top: 100px;
    }

    .label {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: 400;
        position: absolute;
        left: 0;
        top: 382px;
        transform: translate3d(0, -50%, 0);

        span:first-child {
            width: 76px;
            background: rgba(0, 0, 0, .9);
            text-align: center;
        }

        span:last-child {
            flex: 1;
            background: rgba(0, 0, 0, .7);
            overflow: hidden;
        }
    }
}

.lists {
    width: 990px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 100px;
    right: 0;

    li {
        width: 240px;
        height: 300px;
        margin-left: 7px;
        margin-bottom: 10px;
        // display: list-item;
        border: 1px solid transparent;
        border-bottom: 0;
        text-align: -webkit-match-parent;
        overflow: hidden;
        .goods-item {
            width: 240px;
            height: 300px;
            padding: 10px 30px;
            position: relative;
            overflow: hidden;
            border: 1px transparent;
            transition: all .5s;

            a {
                display: block;
                width: 160px;
                height: 160px;
                margin: 0 auto;

                img {
                    width: 160px;
                    height: 160px;
                }
            }


            p {
                margin-top: 6px;
                font-size: 16px;

            }

            .name {
                height: 44px;
            }

            .desc {
                color: #666;
                height: 22px;
            }

            .price {
                margin-top: 10px;
                font-size: 20px;
                color: #cf4444;
            }
        }

        .goods-item:hover .extra {
            transform: none;
        }

        .extra {
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 86px;
            width: 100%;
            background: #27ba9b;
            text-align: center;
            transform: translate3d(0, 100%, 0);
            transition: all .5s;

            span {
                display: block;
                color: #fff;
                width: 120px;
                margin: 0 auto;
                line-height: 30px;
            }

            span:first-child {
                font-size: 18px;
                border-bottom: 1px solid #fff;
                line-height: 40px;
                margin-top: 5px;
            }
        }


    }

    li:hover {
        border-color: #27ba9b;
    }
}
</style>